<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册统计</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all"/>
		<link rel="stylesheet" href="../../css/public.css" media="all"/>
	</head>
	<body style="height: 100%; margin: 0">
	<!-- 搜索条件开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	    <legend>查询条件</legend>
	</fieldset>
	
	<form class="layui-form" method="post" id="searchFrm">
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label">选择年份:</label>
	            <div class="layui-input-inline" style="padding: 5px">
	                <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy" style="height: 30px;border-radius: 10px">
	            </div>
	            <button type="button"
	                    class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
	                    id="doSearch" style="margin-top: 4px">查询
	            </button>
	            <button type="reset"
	                    class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
	                    style="margin-top: 4px">重置
	            </button>
	        </div>
	    </div>
	</form>
	<div id="container" style="height:800px;width: 800px;margin: 0 auto;"></div>
	<script type="text/javascript" src="../../js/lay-module/echarts/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../../js/lay-module/echarts/echarts.min.js"></script>
	<script src="../../lib/layui-v2.5.5/layui.js"></script>
	<script src="../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
	<script src="../../lib/common/common.js" charset="utf-8"></script>
	<script type="text/javascript">
	
	    layui.use(['jquery', 'layer', 'form', 'table', 'laydate'], function () {
	        var $ = layui.jquery;
	        var layer = layui.layer;
	        var form = layui.form;
	        var laydate = layui.laydate;
	
	        laydate.render({
	            elem: '#year',
	            type: 'year',
	            value:new Date()
	        });
	
	        $("#doSearch").click(function () {
	            getData();
	        });
	
	        function getData() {
	            var year = $("#year").val();
	
	            if (year===""){
	                year=new Date().getFullYear();
	            }
	
	            $.get(api+'stat/userRegistrationStat',{year:year},function (data) {
	                var dom = document.getElementById("container");
	                var myChart = echarts.init(dom);
	                option = {
						title: {
							text: '用户注册统计',
							x:'center',
							y:'top',
							textAlign:'left'
						},
	                    angleAxis: {
	                        type: 'category',
	                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
	                    },
	                    radiusAxis: {
	                    },
	                    polar: {
	                    },
	                    series: [{
	                        type: 'bar',
	                        data:data,
	                        coordinateSystem: 'polar',
	                    }],
	                };
	                ;
	                if (option && typeof option === "object") {
	                    myChart.setOption(option, true);
	                }
	            });
	        }
	        getData();
	    });
	
	</script>
	</body>
</html>
